<template>
  <div class="shopCar">
    <!-- 导航栏 -->
    <navTop></navTop>
    <navTwo class="navTwo"></navTwo>

    <!-- 购物车 -->
    <div class="shopcart">
      <!-- 购物车头部 -->
      <div class="shopCarTop">
        <h1>我的购物车</h1>
        <p>
          <router-link to="/shopmall">继续购物 ></router-link>
        </p>
      </div>
      <!-- 购物车主体 -->
      <div class="shopCarMain">
        <template>
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            max-height="500"
            @selection-change="handleSelectionChange"
          >
            <!-- 多选按钮 -->
            <el-table-column type="selection" width="30" size="medium" fixed>
            </el-table-column>
            <el-table-column
              prop="id"
              label="商品id"
              width="100"
              align="center"
            >
            </el-table-column>
            <!-- 商品名称 -->
            <el-table-column
              prop="s_good.name"
              label="商品名称"
              width="200"
              align="center"
            >
            </el-table-column>
            <!-- 商品单价 -->
            <el-table-column
              prop="s_good.price"
              label="价格(元)"
              width="150"
              align="center"
            >
            </el-table-column>
            <!-- 商品数量 -->
            <el-table-column
              prop="num"
              label="数量"
              width="250"
              align="center"
            >
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.num"
                  @change="handleChange(scope.row.num,scope.row.id)"
                  :min="1"
                ></el-input-number>
              </template>
            </el-table-column>
            <!-- 优惠价格 -->
            <el-table-column
              prop="s_good.sale_price"
              label="优惠"
              width="150"
              align="center"
            >
            </el-table-column>
            <!-- 单个商品小计 -->
            <el-table-column
              prop="subtotal"
              label="小计(元)"
              width="200"
              align="center"
            >
              <template slot-scope="scope">
                {{ (scope.row.s_good.price - scope.row.s_good.sale_price) * scope.row.num }}
              </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column
              fixed="right"
              label="操作"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, tableData,scope.row.id)"
                  type="text"
                  size="small"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>

      <!-- 购物车总计 -->
      <div class="shopCarSum">
        <!-- 左边的多选按钮和删除 -->
        <div class="sumLeft">
          <div class="check">
            <span @click="toggleSelection([...tableData])">全选</span>
          </div>
        </div>
        <!-- 右边的商品总价和结算 -->
        <div class="sumRight">
          <div class="text">
            <p>
              已选商品<span>{{ goodsNumber }}</span
              >件，合计(不含运费):<span>￥{{ goodsPrice }}</span>
            </p>
            <p>(商品总价：￥{{ goodsSumPrice }}，优惠：￥{{ goodsDis }})</p>
          </div>
          <div class="btn">
            <button>去结算</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <bottomList></bottomList>
  </div>
</template>

<script>
import navTop from "../components/navtop";
import navTwo from "../components/navTwo";
import bottomList from "../components/bottomList";
import { shopCar,shopCarDel,shopCarUpdate } from "../api/test"
export default {
  name: "shopCar",
  created () {
    shopCar({
      "project_id":149
    }).then((res)=>{
      this.tableData = res.data.result
    })
  },
  components: {
    navTop,
    navTwo,
    bottomList,
  },
  methods: {
    //删除单行
    deleteRow(index, rows,shopId) {
      rows.splice(index, 1);
      console.log(index,rows,shopId);
      shopCarDel(shopId).then((res)=>{
        this.$message({
          message:res.data.msg,
          type:"warning"
        })
      })
    },
    //单选框变化
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    //数量变化
    handleChange(shopNum,shopId) {
        // console.log(shopNum,shopId);
        shopCarUpdate(shopId,{
          "num":shopNum
        }).then((res)=>{
          console.log(res);
        })
    },
    //全选框
    toggleSelection(rows) {
      if (rows) {
        // rows.forEach((row) => {
        //   this.$refs.multipleTable.toggleRowSelection(row);
        //   console.log(this.multipleSelection);
        //   console.log(this.$refs);
        // });
        // this.multipleSelection = rows ? rows : [];
        this.$refs.multipleTable.toggleAllSelection();
      } 
      // else {
      //   this.$refs.multipleTable.clearSelection();
      // }
    },
  },
  computed: {
    goodsNumber() {
      if (this.multipleSelection.length !== 0) {
        return this.multipleSelection.reduce((total, item) => {
          return (total += item.num);
        }, 0);
      } else {
        return 0;
      }
    },
    goodsPrice() {
      if (this.multipleSelection.length !== 0) {
        return this.multipleSelection.reduce((total, item) => {
          return (total += item.num * (item.s_good.price - item.s_good.sale_price));
        }, 0);
      } else {
        return 0;
      }
    },
    goodsSumPrice() {
      if (this.multipleSelection.length !== 0) {
        return this.multipleSelection.reduce((total, item) => {
          return (total += item.num * item.s_good.price);
        }, 0);
      } else {
        return 0;
      }
    },
    goodsDis() {
      if (this.multipleSelection.length !== 0) {
        return this.multipleSelection.reduce((total, item) => {
          return (total += item.s_good.sale_price * item.num);
        }, 0);
      } else {
        return 0;
      }
    },
  },
  data() {
    return {
      multipleSelection: [],
      tableData: [],
    };
  },
};
</script>

<style lang="scss" scoped>
.navTwo {
  height: 80px;
  position: relative;
}
.shopCar {
  background-color: rgb(247, 247, 247);
  .shopcart {
    margin: 0 auto;
    width: 1200px;
    .shopCarTop {
      background-color: rgb(255, 255, 255);
      height: 66px;
      line-height: 66px;
      position: relative;
      margin-bottom: 19px;
      p {
        position: absolute;
        cursor: pointer;
        right: 30px;
        top: 0;
        a {
          font-size: 14px;
          &:hover {
            color: red;
          }
        }
      }
    }
    .shopCarMain {
      background-color: rgb(255, 255, 255);
      height: 500px;
    }
    .shopCarSum {
      margin-top: 19px;
      margin-bottom: 19px;
      background-color: rgb(255, 255, 255);
      height: 100px;
      display: flex;
      justify-content: space-between;
      .sumLeft {
        height: 100%;
        width: 20%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .check {
          span {
            margin: 0 10px;
            cursor: pointer;
            &:hover {
              color: red;
            }
          }
          input {
            cursor: pointer;
          }
        }
        p {
          cursor: pointer;
          &:hover {
            color: red;
          }
        }
      }
      .sumRight {
        width: 600px;
        height: 100%;
        display: flex;
        align-items: center;
        .text {
          width: 60%;
          p {
            span {
              color: red;
            }
            span:last-child {
              font-size: 32px;
            }
          }
        }
        .btn {
          width: 40%;
          button {
            background-color: red;
            color: white;
            width: 180px;
            height: 50px;
            border: none;
            border-radius: 200px;
            font-size: 24px;
            cursor: pointer;
            &:hover {
              background-color: rgb(219, 4, 30);
            }
          }
        }
      }
    }
  }
}
</style>